<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('查看详情')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="620px" top="10vh" @close='close'>
    <div class="dialogContentBox">
      <el-form ref="form" :model="record" label-width="110px" :rules="rules" label-position="left" style="margin:0 30px;">
        <el-form-item :label="$t('名称')" prop="name">
          {{record.show_name}}
        </el-form-item>
        <el-form-item :label="$t('报表周期')" prop="period">
          {{$t(periodList[record.period])}}
          <span v-if="record.period ==='loop'">-{{$t(intervalList[record.interval])}}</span>
        </el-form-item>
        <!-- ----------------------------------single----------------------------- -->
        <el-form-item :label="$t('自定义时间')" prop="time" v-if="record.period === 'single'">
          {{record.time[0]}} {{$t('至')}} {{record.time[1]}}
        </el-form-item>
        <!-- ----------------------------------day----------------------------- -->
        <el-form-item :label="$t('自定义时间')" prop="time" v-if="record.interval === 'day'">
          {{record.time[0]}} {{$t('至')}} {{record.time[1]}}
        </el-form-item>
        <!-- ----------------------------------week----------------------------- -->
        <el-form-item :label="$t('自定义时间')" prop="from_time" v-if="record.interval === 'week'">
          {{$t(weekList[record.from_time])}} {{$t('至')}} {{$t(weekList[record.to_time])}}
        </el-form-item>
        <!-- ----------------------------------month----------------------------- -->
        <el-form-item :label="$t('自定义时间')" prop="from_time" v-if="record.interval === 'month'">
          {{monthList[record.from_time-1]}} {{$t('至')}} {{monthList[record.to_time-1]}}
        </el-form-item>
        <el-form-item :label="$t('自定义模板')" prop="template_name">
          <div v-for="item in record.template_name" :key="item">{{item}}</div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" class="detailsClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'DiyReportDetails',
  data () {
    return {
      dialogVisible: false,
      record: {
        name: '',
        show_name: '',
        period: 'single',
        interval: '',
        time: '',
        from_time: '',
        to_time: '',
        template_name: []
      },
      recordCopy: {
        name: '',
        show_name: '',
        period: 'single',
        interval: '',
        time: '',
        from_time: '',
        to_time: '',
        template_name: []
      },
      intervalList: {
        'day': '日',
        'week': '周',
        'month': '月'
      },
      weekList: {
        '1': '星期一',
        '2': '星期二',
        '3': '星期三',
        '4': '星期四',
        '5': '星期五',
        '6': '星期六',
        '7': '星期日'
      },
      monthList: ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th', '15th', '16th', '17th', '18th', '19th', '20th', '21st', '22nd', '23rd', '24th', '25th', '26th', '27th', '28th', '29th', '30th', '31st'],
      periodList: {
        'single': '历史报表',
        'loop': '周期性报表'
      },
      rules: {}
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      if (data) {
        this.record.name = data.name
        this.record.show_name = data.show_name
        if (data.time_type === 'single') {
          this.record.period = data.time_type
          this.record.time = [data.from_time, data.to_time]
        } else {
          this.record.period = 'loop'
          this.record.interval = data.time_type
          if (this.record.interval === 'day') {
            this.record.time = [data.from_time, data.to_time]
          } else if (this.record.interval === 'week') {
            this.record.from_time = data.from_time.split('-')[0]
            this.record.to_time = data.to_time.split('-')[0]
          } else {
            this.record.from_time = data.from_time
            this.record.to_time = data.to_time
          }
        }
        this.record.template_name = data.reftemplate
      }
    },
    close () {
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style scoped>
.dialogContentBox {
  max-height: calc(80vh - 184px);
  overflow-y: auto;
}
.selectBox {
  padding: 0 20px;
}
</style>
